// Ripple

@import '../../themes/default';
@import '../../mixins/index';
@import './param';

@mixin ripple {
  overflow: hidden;
  position: relative;
  &:not(:empty) {
    transform: translateZ(0);
  }
  &-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.1);
    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
    transform: scale(0);
  }
  @include button-type('initial', $--x-background-a500);
  @include button-type('primary', $--x-primary-200);
  @include button-type('success', $--x-success-200);
  @include button-type('warning', $--x-warning-200);
  @include button-type('danger', $--x-danger-200);
  @include button-type('info', $--x-info-200);
  @include button-type('text', rgba(0, 0, 0, 0.1));
}

@mixin button-type($type, $background) {
  &-#{$type} {
    .#{$--x-ripple-prefix}-element {
      background-color: $background;
    }
  }
}
